WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > 2D Chart Types > Parallel Coordinates Plot
Parallel Coordinates Plot

What is Parallel Coordinates Plot?

Parallel Coordinates Plot is a widely used chart type for visualizing and analyzing high-dimensional datasets. Typical high-level problems where this technique can be used include classification, regression, clustering, dependency-modeling, change detection, high-dimensional geometry, etc.

For instance, Parallel Coordinates Plot can be used to compare several sets of observations (represented by lines) of a combination of different factors (each represented by a vertical axis):

ParallelCoordinatesSurface

In SciChart, Parallel Coordinates Plot is represented by a WPF Control called SciChartParallelCoordinateSurface. It is built on top of SciChartSurface and extends its API.

Vertical Axes are created automatically based on type of data. It is allowed to apply an individual Style to every Axis, thus making customization possible.

Although RenderableSeries are created automatically as well, they are limited to Lines and all share the same Style. It is possible to change between plain lines or splines or different degree.

Interaction is provided via ChartModifiers API.

Creating Parallel Coordinates Plot

Creation process is quite straightforward. First, lets declare SciChartParallelCoordinateSurface in XAML:

Declaring SciChartParallelCoordinateSurface in XAML
Copy Code 
<s:SciChartParallelCoordinateSurface ParallelCoordinateDataSource="{Binding DataSource}"
                                             ChartTitle="Weather"/>

Key property is ParallelCoordinateDataSource, which is used to provide data source for SciChartParallelCoordinateSurface. It expects an object of ParallelCoordinateDataSource type:

Declaring a collection of records
Copy Code 
DataSource = new ParallelCoordinateDataSource<WeatherData>(
     new ParallelCoordinateDataItem<WeatherData, DateTime>(weatherData=>weatherData.Date),
     new ParallelCoordinateDataItem<WeatherData, double>(weatherData=>weatherData.MinTemp),
     new ParallelCoordinateDataItem<WeatherData, double>(weatherData=>weatherData.MaxTemp));

ParallelCoordinateDataSource is a collection of ParallelCoordinateDataItem. Every ParallelCoordinateDataItem represents a particular category or property of a single data record. It is visualized as a Vertical Axis.

To create ParallelCoordinateDataItem it is necessary to provide a mapping used to access appropriate property of the data record. Additionally, it can be used to provide Category Title and a Style for corresponding Vertical Axis (see more info about Axis Styling below).

Finally, a collection of records should be provided for ParallelCoordinateDataSource. It expects a collection of type that was used earlier for mapping, WeatherData:

New object of ParallelCoordinateDataSource type
Copy Code 
public class WeatherData(
{
     public DateTime Date { get; set; }
     public double MinTemp { get; set; }
     public double MaxTemp { get; set; }
}
DataSource.SetValues(new List<WeatherData>
{
     // WeatherData records
});

Updating ParallelCoordinateDataSource

If any changes occur in a data set, a refresh of SciChartParallelCoordinateSurface can be triggered by calling Invalidate() method on ParallelCoordinateDataSource:

Calling Invalidate()
Copy Code 
DataSource.Invalidate();

Also, it is possible to receive notifications about changes by subscribing to SourceChanged and CompositionChanged events on ParallelCoordinateDataSource.

Styling Vertical Axes

ParallelCoordinateDataItem objects can be used to provide Title at the bottom and a Style for corresponding Vertical Axis. There are corresponding properties Title and AxisStyle. Every Vertical Axis can be styled individually:

ParallelCoordinateDataItem object properties
Copy Code 
DataSource = new ParallelCoordinateDataSource<WeatherData>(
     new ParallelCoordinateDataItem<WeatherData, DateTime>(p => p.Date)
     {
         Title = "Time",
         AxisStyle = timeAxisStyle
     },
     new ParallelCoordinateDataItem<WeatherData, double>(p => p.MinTemp)
     {
         Title = "Min Temp",
         AxisStyle = temperatureAxisStyle
     },
     new ParallelCoordinateDataItem<WeatherData, double>(p => p.MaxTemp)
     {
         Title = "Max Temp",
         AxisStyle = temperatureAxisStyle
     });

The Styles used should target particular type of Axis that is suitable for working with expected type of data. Alternatively, the base type AxisBase can be targeted:

Styling Axis
Copy Code 
            <Style x:Key="TemperatureAxisStyle" TargetType="{x:Type s:AxisBase}">
                <Setter Property="BorderBrush" Value="{StaticResource DefaultAxisBrush}"/>
                <Setter Property="BorderThickness" Value="1,0,0,0"/>
                <Setter Property="MajorTickLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Line}">
                            <Setter Property="Stroke" Value="{StaticResource DefaultAxisBrush}"/>
                            <Setter Property="X2" Value="9"/>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="MinorTickLineStyle">
                    <Setter.Value>
                        <Style  TargetType="{x:Type Line}">
                            <Setter Property="Stroke" Value="{StaticResource DefaultAxisBrush}"/>
                            <Setter Property="X2" Value="3"/>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="TickLabelStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type s:DefaultTickLabel}">
                            <Setter Property="Foreground" Value="{StaticResource DefaultAxisBrush}"/>
                            <Setter Property="FontWeight" Value="SemiBold"/>
                            <Setter Property="FontSize" Value="12"/>
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>

Titles (bottom labels) for every Vertical Axis can be styled via the LabelStyle property on SciChartParallelCoordinateSurface:

Styling Titles
Copy Code 
        <s:SciChartParallelCoordinateSurface ParallelCoordinateDataSource="{Binding DataSource}"
                                             ChartTitle="Weather">
            <s:SciChartParallelCoordinateSurface.LabelStyle>
                <Style TargetType="{x:Type s:DefaultTickLabel}">
                    <Setter Property="FontSize" Value="14"/>
                    <Setter Property="Foreground" Value="DarkSeaGreen" />
                </Style>
            </s:SciChartParallelCoordinateSurface.LabelStyle>
        </s:SciChartParallelCoordinateSurface>

All Titles share the same Style as individual styling of Titles is not supported.

Styling RenderableSeries (Lines)

Lines can be styled via the RenderableSeriesStyle property on SciChartParallelCoordinateSurface:

Styling Lines
Copy Code 
        <s:SciChartParallelCoordinateSurface ParallelCoordinateDataSource="{Binding DataSource}"
                                             ChartTitle="Weather">
            <s:SciChartParallelCoordinateSurface.RenderableSeriesStyle>
                <Style TargetType="{x:Type s:BaseRenderableSeries}">
                    <Setter Property="Stroke" Value="LightSkyBlue"/>
                    <Setter Property="StrokeThickness" Value="1"/>
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Stroke" Value="White"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </s:SciChartParallelCoordinateSurface.RenderableSeriesStyle>
        </s:SciChartParallelCoordinateSurface>

All RenderableSeries share the same style as individual styling of RenderableSeries is not supported.

It is possible to switch RenderableSeries type between Lines and Splines via the DrawSplines property on SciChartParallelCoordinateSurface.

ChartModifiers

Interactivity is provided by ChartModifiers. ChartModifiers can be applied to a SciChartParallelCoordinateSurface via the ChartModifier property:

Applying ChartModifiers
Copy Code 
        <s:SciChartParallelCoordinateSurface ParallelCoordinateDataSource="{Binding DataSource}"
                                             ChartTitle="Weather">
            <s:SciChartParallelCoordinateSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:ZoomPanModifier XyDirection="XDirection"/>
                    <s:RubberBandXyZoomModifier IsXAxisOnly="True"/>
                    <s:ParallelAxisReorderModifier AxesReordered="OnAxisReordered"/>
                    <s:SeriesSelectionModifier />
                    <s:MouseWheelZoomModifier XyDirection="XDirection"/>
                    <s:ZoomExtentsModifier/>
                </s:ModifierGroup>
            </s:SciChartParallelCoordinateSurface.ChartModifier>
        </s:SciChartParallelCoordinateSurface>

The following ChartModifiers are supported by SciChartParallelCoordinateSurface:

  • ZoomPanModifier
  • RubberBandXyZoomModifier
  • MouseWheelZoomModifier
  • ZoomExtentsModifier
  • SeriesSelectionModifier
  • ParallelAxisReorderModifier

See Also
The Radar Chart Type

Axis APIs

Axis Styling - Templating the Axis Panel

Zooming_and_Panning

RubberBandXyZoomModifier